<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
    <script type="text/javascript" src="js/vue.min.js"></script>
    <title>豆瓣电影抓取</title>
  </head>

  <body>
    <div class="container" style="padding-bottom: 20px;">
      <div class="page-header text-center">
        <h1>豆瓣电影抓取</h1>
      </div>
      <div class="row">
        <div class="col-lg-offset-1 col-lg-10">
          
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h4>抓取电影搜索结果</h4>
            </div>
            <div class="panel-body row" style="font-size: 16px;">
              <div class="col-sm-4">关键词：
                <input type="text" id="keyword" style="width: 200px" />
              </div>
              <div class="col-sm-4">标签：
                <input type="text" id="tag" style="width: 200px" />
              </div>
              <div class="col-sm-4">
                <button id="search" class="btn btn-success pull-right" style="width: 100px;">
                  抓&emsp;取
                </button>
              </div>
            </div>
          </div>
          
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h4>抓取正在上映电影</h4>
            </div>
            <div class="panel-body row" style="font-size: 16px;">
              <div class="col-sm-6">城市：
                <input type="text" id="city" style="width: 200px" />
              </div>
              <div class="col-sm-6">
                <button id="intheater" class="btn btn-success pull-right" style="width: 100px;">
                      抓&emsp;取
                    </button>
              </div>
            </div>
          </div>
          
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h4>抓取即将上映电影
                <button id="comingsoon" class="btn btn-success pull-right" style="width: 100px;">
                                  抓&emsp;取
                </button>
              </h4>
            </div>
          </div>
          
          <div class="panel panel-primary">
            <div class="panel-heading">
              <h4>抓取TOP250电影
                <button id="top250" class="btn btn-success pull-right" style="width: 100px;">
                                  抓&emsp;取
                </button>
              </h4>
            </div>
          </div>
          
          <div class="panel panel-success" id="app">
            <div class="panel-heading">
              <h4>
                已创建的抓取任务&nbsp;<span class="badge" v-text="tasks.length"></span>
                <button onclick="clearTasks()" class="btn btn-danger pull-right" 
                   title="仅清除页面记录" style="width: 100px;">
                  清&emsp;空
                </button>
              </h4>
            </div>
            <table class="table table-striped" style="font-size: 16px;">
              <thead>
                <th>抓取任务</th>
                <th>状态</th>
                <th>耗时(毫秒)</th>
                <th>抓取结果</th>
              </thead>
              <tr v-for="task in tasks">
                <th v-text="task.info"></th>
                <th>
                  <i v-if="task.result === false" class="fa fa-spinner fa-pulse"></i>
                  <span v-else-if="task.result.status" class="label label-success">成功</span>
                  <span v-else class="label label-danger">失败</span>
                </th>
                <th v-text="task.result.time"></th>
                <th v-text="task.result === false ? '执行中' : task.result.msg"></th>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        tasks: []
      }
    });
    $(function() {
      $("[data-toggle='tooltip']").tooltip();
    });
    var $city = $("#city");
    var $keyword = $("#keyword");
    var $tag = $("#tag");
    
    $("#intheater").click(function() {
      var city = $city.val();
      $city.val("");
      var task = {
        info: "抓取'" + city + "'正在上映的电影",
        result: false
      };
      vm.tasks.unshift(task);
      myPost({
        url: "/intheater",
        type: "post",
        data: {city: city},
        context: task
      });
    });
    
    $("#search").click(function() {
      var keyword = $keyword.val();
      var tag = $tag.val();
      $keyword.val("");
      $tag.val("");
      var task = {
          info: "抓取 " + (keyword === "" ? "" : "关键词为'" + keyword + "' ")
                + (tag === "" ? "" : "标签为'" + tag + "' ") + "的电影",
          result: false 
      };
      vm.tasks.unshift(task);
      myPost({
        url: "/search",
        data: {
          keyword: keyword,
          tag: tag
        },
        context: task
      });
    });
    
    $("#comingsoon").click(function() {
      var task = {
          info: "抓取即将上映的电影",
          result: false 
      };
      vm.tasks.unshift(task);
      myPost({
        url: "/comingsoon",
        context: task
      });
    });
    
    $("#top250").click(function() {
      var task = {
          info: "抓取Top250的电影",
          result: false 
      };
      vm.tasks.unshift(task);
      myPost({
        url: "/top250",
        context: task
      });
    });
    function clearTasks() {
      vm.tasks = [];
    };
    function myPost(args, finalDo) {
      var myAjaxArgs = {
        type: 'post',
        cache: false,
        datatype: "json",
        timeout: 100000,
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            showMessage(XMLHttpRequest.responseJSON.message);
            if (typeof finalDo === 'function') {
                finalDo();
            }
        },
        complete: function(XMLHttpRequest, status) {
            if (status === "timeout") {
                XMLHttpRequest.abort();
                showMessage("请求超时！请重试！");
                if (typeof finalDo === 'function') {
                    finalDo();
                }
            }
        },
        success: function(ret) {
          this.result = ret;
        }
      };
      $.ajax($.extend(myAjaxArgs, args));
    }
  </script>
</html>